<style lang="scss" scoped>
.operate-exam-container ::v-deep {
    .el-breadcrumb__item:last-child ::v-deep {
        .el-breadcrumb__inner {
            color: #606266;
            font-weight: bold;
            cursor: default;
        }
    }
    .el-breadcrumb__item ::v-deep {
        .is-link {
            color: #aaa;
            font-weight: unset;
        }
        .is-link:hover {
            color: #409eff;
        }
    }
    .exam-form {
        padding-right: 10px;
    }
    .exam-form ::v-deep {
        .el-date-editor.el-input {
            width: 100% !important;
        }
        .editor-custom-btn-container {
            display: none;
        }
        .tinymce-container {
            margin: 0 !important;
        }
    }
    .title {
        font-size: 18px;
    }

    .row-bg {
        margin: 30px 0 30px 0;
    }

}
</style>
<template>
    <div class="operate-exam-container">
        <div style="height: 30px">
            <el-breadcrumb style="float: left" separator="/">
                <el-breadcrumb-item :to="{ path: '/competitionList' }">
                    <span @click="reback()">{{ $t('创建竞赛') }}</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>{{ '查看' }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card
            style="padding: 0 !important"
            shadow="never"
            v-loading="loading"
            body-style="padding: 24px;"
        >
            <el-row type="flex" class="row-bg" justify="space-between">
                <h2 style="color: #101010; font-weight: bold">{{ $t('创建竞赛') }}</h2>
                <el-button @click="reback">{{ $t('requirement.back') }}</el-button>
            </el-row>
            <hr style="border-top: 2px solid #eee" />
            <!-- <h2 style="color: #101010; font-weight: bold">
                {{ $t('学科竞赛项目申报书') }}
            </h2> -->
            <el-form
                :model="queryForm"
                label-width="170px"
                label-position="top"
                :rules="rulesForm"
                ref="addform"
                label-suffix="："
            >
                <el-row :gutter="24">
                    <!-- 年度 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('年度')">
                            <el-date-picker
                                disabled
                                :placeholder="$t('scoringItemSetting.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.year"
                                type="year"
                                value-format="yyyy"
                                format="yyyy"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <!-- 竞赛项目名称 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('竞赛项目名称')" prop="projectName" style="position: relative;">
                            <span style="position: absolute; left: 90px; top: -43px; width: 100%; color: red;">（可关联竞赛项目，也可自行输入）</span>
                            <el-select
                                disabled
                                v-model="queryForm.projectName"
                                filterable
                                clearable
                                maxlength="32"
                                remote
                                reserve-keyword
                                v-el-select-loadmore="loadmore"
                                :filter-method="dataFilter"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.oneSubjects"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 竞赛大类 -->
                    <el-col :span="6">
                        <el-form-item label="竞赛大类" prop="type">
                            <el-select
                                disabled
                                v-model="queryForm.type"
                                placeholder="请选择"
                                clearable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.type"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 竞赛级别 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('竞赛级别')" prop="comLevel">
                            <el-select
                                disabled
                                filterable
                                v-model="queryForm.comLevel"
                                :placeholder="$t('common.pla.pleaseSelect')"
                                clearable
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.comLevel"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <!-- 报名开始时间 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('报名开始时间')" size="small">
                            <el-date-picker
                                disabled
                                :placeholder="$t('academicForum.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.signStartStr"
                                :picker-options="pickerOptionsEnd"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <!-- 报名结束时间 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('报名结束时间')" size="small">
                            <el-date-picker
                                disabled
                                :placeholder="$t('academicForum.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.signEndStr"
                                :picker-options="pickerOptionsEnd"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <!-- 考试开始时间 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('考试开始时间')" size="small">
                            <el-date-picker
                                disabled
                                :placeholder="$t('academicForum.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.examStartStr"
                                :picker-options="clbssjqPickerOptions"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>

                    <!-- 考试结束时间 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('考试结束时间')" size="small">
                            <el-date-picker
                                disabled
                                :placeholder="$t('academicForum.pleaseSelect')"
                                style="width: 100%"
                                v-model="queryForm.examEndStr"
                                :picker-options="clbssjzPickerOptions"
                                type="datetime"
                                value-format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row :gutter="24">
                    <!-- 竞赛形式 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('竞赛形式')">
                            <el-select
                                disabled
                                v-model="queryForm.form"
                                clearable
                                style="width: 100%"
                            >
                                <el-option label="个人" :value="'0'"></el-option>
                                <el-option label="团体" :value="'1'"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <!-- 小队人数限制 -->
                    <el-col v-if="queryForm.form === '1'" :span="6">
                        <el-form-item label="小队人数限制">
                            <el-col :span="12">
                                <el-form-item label="">
                                    <el-input-number
                                        disabled
                                        v-model="queryForm.personLimitOne"
                                        :max="queryForm.personLimitTwo"
                                        :min="1"
                                    ></el-input-number>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="">
                                    <el-input-number
                                        disabled
                                        v-model="queryForm.personLimitTwo"
                                        :min="
                                            queryForm.personLimitTwo
                                                ? queryForm.personLimitOne
                                                : null
                                        "
                                        :max="999999999"
                                    ></el-input-number>
                                </el-form-item>
                            </el-col>
                        </el-form-item>
                    </el-col>

                    <!-- 竞赛规则 -->
                    <el-col :span="6">
                        <el-form-item :label="$t('竞赛规则')" prop="roleId">
                            <el-select
                                disabled
                                v-model="queryForm.roleId"
                                filterable
                                clearable
                                maxlength="32"
                                remote
                                reserve-keyword
                                v-el-select-loadmore="loadmore"
                                :filter-method="dataFilter"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="item in options.oneSubjects"
                                    :key="item.id"
                                    :label="item.roleName"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- 课程编号 -->
                    <el-col :span="6">
                        <el-form-item label="课程编号" style="position: relative;">
                            <span style="position: absolute; left: 61px; top: -43px; width: 100%; color: red;">（填此项才可按教学班排考）</span>
                            <el-input v-model="queryForm.courseCode" clearable placeholder="请输入" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="24">
                    <edu-table
                        v-if="queryForm.competitionSubList.length>0" 
                        :pagination="false"
                        :selection="false"
                        :tooltipEffect="tooltipEffect"
                        stripe
                        :data="queryForm.competitionSubList"
                        size="mini">
                        <edu-table-column label="竞赛小类" prop="subName" align='center'></edu-table-column>
                    </edu-table>
                </el-row>
                <el-row :getter="24" style="padding:20px 0;">
                    <el-col :span="24">
                        <!--  -->
                        <el-form-item :label="$t('考试说明')" prop="comment">
                            <p style='border: 1px solid #e5e5e5;padding:10px' v-html="queryForm.comment" />
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-card>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import interAcaConferenceApi from 'common/src/api/internationalCommunication/interAcaConference'
import interManagementApi from 'common/src/api/externalExchange/interdiSciplinaryManagement'
import { findTeacherInfoList } from 'common/src/api/studentinfo'
import forumProject from 'common/src/api/academicForums/forumProject'
import comRegistration from 'common/src/api/competitionRegistration/comRegistration'
import Tinymce from 'common/src/components/tinymce'

export default {
    components: {
        Tinymce,
    },
    props: {
        compile: {
            type: String,
            default: '',
        },
        dataList: {
            type: Object,
            default: () => {},
        },
    },
    data() {
        // 校验手机号码
        let validateNum = (rule, value, callback) => {
            let regExp = /^1[23456789]\d{9}$/
            if (!regExp.test(value)) {
                callback(new Error(this.$t('projectApplication.validateStudentPhone')))
            } else {
                callback()
            }
        }
        // 验证电子邮箱
        let validateNumEmail = (rule, value, callback) => {
            let reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
            if (!reg.test(value) || value === '') {
                return callback(new Error(this.$t('interdisciplinaryManagement.pleaseEnter')))
            }
            return callback()
        }

        let cannotEnter = (rule, value, callback) => {
            let reg = /[`$]/im
            if (reg.test(value)) {
                return callback(new Error(this.$t('identificationToDoList.cannotContain')))
            } else if (value === '') {
                return callback(new Error(this.$t('internship.pleaseEnter')))
            }
            return callback()
        }
        return {
            toolbar: [
                'undo redo | styleselect | fontselect | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough | table | alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist |  fullscreen ',
            ],
            variableList: '',
            queryForm: {
                type: '', // 竞赛大类
                projectName: '',
                comLevel: '',
                signStartStr: '',
                signEndStr: '',
                examStartStr: '',
                examEndStr: '',
                year: null,
                form: '',
                personLimitOne: null,
                personLimitTwo: null,
                country: '',
                educationTag: 2,
                courseCode: '', // 课程编号
                competitionSubList: []
            },

            formData: {
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    roleName: '',
                },
            },
            editModel: false,
            options: {
                type: [], // 竞赛大类
                englisNameSchool: [],
                nameSchool: [],
                approver: [],
                comLevel: [],
                oneSubjects: [],
            },
            rulesForm: {
                forumStartTime: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'blur',
                    },
                ],
                forumEndTime: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'blur',
                    },
                ],
                studentId: [
                    {
                        required: true,
                        message: this.$t('interdisciplinaryManagement.pleaseChoose'),
                        trigger: 'change',
                    },
                ],
                country: [
                    {
                        required: true,
                        message: this.$t('请输入论坛举办国家地区'),
                        trigger: 'change',
                    },
                ],
                oneSubject: [
                    {
                        required: true,
                        message: this.$t('请输入项目涉及一级学科'),
                        trigger: 'change',
                    },
                ],
                projectNumber: [
                    { required: true, message: this.$t('请输入项目编号'), trigger: 'blur' },
                ],
                // studentId: [
                //     { required: true, message: this.$t('internship.pleaseEnter'), trigger: 'change' }
                // ],
                projectName: [
                    {
                        // required: true,
                        message: this.$t('请输入项目名称'),
                        trigger: 'change',
                    },
                ],
                phoneNumber: [{ required: true, validator: validateNum, trigger: 'change' }],
                email: [{ required: true, validator: validateNumEmail, trigger: 'change' }],
            },
        }
    },
    computed: {
        pickerOptionsStart() {
            let _this = this
            return {
                disabledDate: (value) => {
                    if (_this.queryForm.signEndStr) {
                        if (
                            value.getTime() >
                            new Date(_this.queryForm.signEndStr.split(' ')[0]).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                },
            }
        },

        pickerOptionsEnd() {
            let _this = this
            return {
                disabledDate: (value) => {
                    if (_this.queryForm.signStartStr) {
                        if (
                            value.getTime() + 24 * 60 * 60 * 1000 <
                            new Date(_this.queryForm.signStartStr.split(' ')[0]).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                },
            }
        },
        clbssjqPickerOptions() {
            let _this = this
            return {
                disabledDate: (value) => {
                    if (_this.queryForm.examEndStr) {
                        if (
                            value.getTime() >
                            new Date(_this.queryForm.examEndStr.split(' ')[0]).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                },
            }
        },
        clbssjzPickerOptions() {
            let _this = this
            return {
                disabledDate: (value) => {
                    if (_this.queryForm.examStartStr) {
                        if (
                            value.getTime() + 24 * 60 * 60 * 1000 <
                            new Date(_this.queryForm.examStartStr.split(' ')[0]).getTime()
                        ) {
                            return true
                        }
                    }
                    return false
                },
            }
        },
    },
    created() {
        this.compile == '新增'
            ? (this.variableList = this.$t('新增'))
            : this.compile == '编辑'
            ? (this.variableList = this.$t('interdisciplinaryManagement.edit'))
            : (this.variableList = this.$t('interdisciplinaryManagement.examine'))

        this.getList(this.formData)
    },

    mounted() {
        this.getOptions()
        if (this.dataList) {
            let obj = JSON.parse(JSON.stringify(this.dataList))
            this.queryForm = { ...obj }
            this.queryForm.signStartStr = obj.signStart
            this.queryForm.signEndStr = obj.signEnd
            this.queryForm.examStartStr = obj.examStart
            this.queryForm.examEndStr = obj.examEnd
            this.queryForm.year = obj.year + ''
        }
    },
    methods: {
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE', 'G_GJQU', 'JSGL_JSJB','JSDL'],
            }
            queryDic(data).then((res) => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE',
                        nationId: 'G_GJQU', // 国别/地区
                        comLevel: 'JSGL_JSJB', // 竞赛级别
                        type: 'JSDL' // 竞赛大类
                    },
                    res.data,
                    this.options
                )

                // this.options.comLevel = this.options.comLevel.filter((value) => {
                //     return value.value !== '3' && value.value !== '5'
                // })
            })
        },
        cancelOperate() {
            this.$refs['addform'].resetFields()
        },
        validateWeight(rule, value, callback) {
            let expReg = /^([0-9]{1,32})(\.\d{1,4})?$/
            if (!value) {
                callback(new Error(this.$t('请输入专项经费')))
            } else if (!expReg.test(value)) {
                callback(new Error(this.$t('请输入大于0的数字,最多四位小数')))
            } else {
                callback()
            }
        },
        postApproveAgree(date) {
            interAcaConferenceApi.overseasCollege(date).then((res) => {
                if (res.data.list.length > 0) {
                    res.data.list.forEach((el) => {
                        this.options.nameSchool.push({
                            value: el.id,
                            label: el.collegeName,
                            nationName: el.nationName,
                        })
                        this.options.englisNameSchool.push({
                            value: el.id,
                            label: el.collegeNameEn,
                            nationName: el.nationName,
                        })
                    })
                }
            })
        },
        loadmore() {
            this.getList(this.formData)
        },
        dataFilter(val) {
            this.options.oneSubjects = []
            this.formData.roleName = val
            this.getList(this.formData)
        },
        getList(formData) {
            comRegistration.getListRole(formData).then((res) => {
                if (res && res.code == 200) {
                    this.options.oneSubjects = res.data.list
                }
            })
        },
        reback() {
            this.$emit('change-exam')
        },
        cancelClose() {
            this.$refs['addform'].resetFields()
            for (const key in this.queryForm) {
                if (key == 'studentList') {
                    this.queryForm.studentList = []
                } else {
                    this.queryForm[key] = ''
                }
            }
        },
        // 保存
        conserve() {
            this.$refs['addform'].validate((valid) => {
                if (valid) {
                    this.queryForm.id = this.dataList.id
                    comRegistration.editForum(this.queryForm).then((res) => {
                        this.$message.success(this.$t('internship.successfully'))
                        this.$refs['addform'].resetFields()
                        this.goback()
                    })
                }
            })
        },
    },
}
</script>
